<template>
	<div class="page" v-loading="loading"
	element-loading-text="AI正在思考中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
	   <!-- 弹出层  -->
	   <el-drawer
	     direction='ltr'
	     :visible.sync="drawer"
	     :with-header="false">
	    <!-- 左边区域-->
	    <div class="Left_side_area">
		 <div class="Left_title">
			智能写作
		 </div>
		 <!-- 新建会话-->
		 <a href="javascript: void(0)" class="New_Conversation" @click="NewConver()">
		  创建新会话			 
			 </a>
			 <!-- 会话记录-->
			 <div class="Conversation_Records" >
				<div class="Records" v-for="(item,index) in ConverList" @click="ToggleConve(item.session_id)" 
				:key="index" v-if="Is_Token" :style="{background:SessionId == item.session_id? '#2c2e39' : ''}">
					<img src="https://ai.vrprism.com/uploads/20240327/2448f9f37a486bac79e87cf79119b61e.png" alt="" />
					<span>{{item.question}}</span>
				</div>
			 </div>
			 <!-- 删除会话 -->
			 <a href="javascript: void(0)" class="Delect" @click="ClearAway">
				 <img src="https://ai.vrprism.com/uploads/20240327/e7e3f7e9d7ff4001bd69411cb9fa0db8.png" alt="" />
				 <span>清除所有会话</span>
			 </a>
			 <!-- 显示切换 -->
			 <div class="Feature">
				<div class="Plate" v-for="(item,index) in PlateList" :key="index"
				@click="Toggle(index,item.name)"
				:style="{background:index == PlateIds? '#2c2e39' : ''}">
					<img :src="PlateIds == index? item.imgActive : item.img " alt="" />
					<span :style="{color:index == PlateIds? '#abdfca' : ''}">{{item.name}}</span>
				</div>
			 </div>
	    </div>
	   </el-drawer>
	   <!-- 左边区域-->
	   <div class="Left_side_area" v-if="EquipmentIs == 1">
	    <div class="Left_title">
	   	智能写作
	    </div>
	    <!-- 新建会话-->
	    <a href="javascript: void(0)" class="New_Conversation" @click="NewConver()">
	     创建新会话			 
	   	 </a>
	   	 <!-- 会话记录-->
	   	 <div class="Conversation_Records" >
	   		<div class="Records" v-for="(item,index) in ConverList" @click="ToggleConve(item.session_id)" 
	   		:key="index" v-if="Is_Token" :style="{background:SessionId == item.session_id? '#2c2e39' : ''}">
	   			<img src="https://ai.vrprism.com/uploads/20240327/2448f9f37a486bac79e87cf79119b61e.png" alt="" />
	   			<span>{{item.question}}</span>
	   		</div>
	   	 </div>
	   	 <!-- 删除会话 -->
	   	 <a href="javascript: void(0)" class="Delect" @click="ClearAway">
	   		 <img src="https://ai.vrprism.com/uploads/20240327/e7e3f7e9d7ff4001bd69411cb9fa0db8.png" alt="" />
	   		 <span>清除所有会话</span>
	   	 </a>
	   	 <!-- 显示切换 -->
	   	 <div class="Feature">
	   		<div class="Plate" v-for="(item,index) in PlateList" :key="index"
	   		@click="Toggle(index,item.name)"
	   		:style="{background:index == PlateIds? '#2c2e39' : ''}">
	   			<img :src="PlateIds == index? item.imgActive : item.img " alt="" />
	   			<span :style="{color:index == PlateIds? '#abdfca' : ''}">{{item.name}}</span>
	   		</div>
	   	 </div>
	   </div>
	   
	   
	   <!-- 右边区域-->
	   <div class="Right_side_area">
	   	 <!-- 第一部分 用户信息显示 -->
		 <div class="Part_one">
			<!-- 抽屉 -->
			<a href="javascript: void(0)" class="drawer" v-if="EquipmentIs != 1" @click.stop="drawer = true">
				<img src="https://ai.vrprism.com/uploads/20240328/0b97cfb872c60da8ad0c14c1a3884aaa.png" alt="" />
			</a>
		 	<!-- 会员信息 -->
			<div class="Vip" @click="ViewVip()">
				<img src="https://ai.vrprism.com/uploads/20240326/4fed7eac0b206a19211144cd9a6a1938.png" alt="" />
				<span>{{Is_Token? (!isNaN(vip_user)? timestampToDate(vip_user*1000) : '开通会员') :  '开通会员'}}</span>
			</div>
			<!-- 用户信息 -->
			<div class="User"  @click="ViewUser()">
				<img :src="Is_Token? user_info.avatar : 'https://ai.vrprism.com/uploads/20240326/ce8d5c8ad172de4f863011e34afcf4f3.png'  " alt="" />
				<span>{{ Is_Token? user_info.nickname : '点击登陆' }}</span>
			</div>
		 </div>
		 <!-- 第二部分 聊天信息显示-->
		 <div class="Part_two">
		 	<div class="Part_auto" ref="scrollableDiv">
				<!-- 占位符 -->
		 		<div class="placeholder"></div>
				<!-- 欢迎语 -->
				<div class="greeting">
					<img class="avatar" src="https://ai.vrprism.com/uploads/20240326/671581be184088bb8642bd6dfcea0e5b.png" alt="" />
					<span class="Message">您好，我可以回答您所有的问题，快来提问吧！AI⽣成内容仅供参考，不代表平台⽴场。禁止商用，请勿散播谣言！</span>
				</div>
				<!-- 第三部分  常见提问实例-->
				<div class="Part_Three">
				    
					<div class="hottitle">
						<img src="https://ai.vrprism.com/uploads/20240326/7cea3c1dcbad53eee373697aa6029725.png" alt="" />
						<span>提问示例</span>
					</div>
					<div class="hotwords">
						<div class="Item" v-for="(item,index) in HotItem" :key="index"  @click="uestion(item.question_demo)">
							<span>{{item.question_demo}}</span>
						</div>
					</div>
				</div>
				
				<!-- 用户提问 -->
				<div class="greeting" v-for="(item,index) in ConversationList" :key="index">
					<img class="avatar" :src="item.role == 'user'? user_info.avatar : 'https://ai.vrprism.com/uploads/20240326/671581be184088bb8642bd6dfcea0e5b.png' " alt="" />
					<span class="Message" :style="{color:item.role == 'user'? '#76fbb9' : ''}">{{item.content}}</span>
				</div>
				
		 	</div>
		 </div>
		 <!-- 发送问题-->
		 <div class="Send_Message" :style="SendCss">
		 	<div class="Bottom_frame">
		 		<textarea id="myTextarea" v-model="Multiline_text" class="input" cols="3" rows="1" placeholder="输入点问题试一下"></textarea>
				<a href="javascript: void(0)" @click="SendInterpretation()" class="Send">发送</a>
		 	</div>
		 </div>
	   </div>
	</div>
</template>

<script>
export default {
  data() {
  	return{
		PlateIds:0,
		PlateList:[{
			id:1,
			img:'https://luoxiaolin.vrprism.com/uploads/20240326/9bf5c6c65f517da5ee21fea17f2e1e07.png',
			imgActive:'https://luoxiaolin.vrprism.com/uploads/20240326/61eda883c938f69192ceef8e89a8ef56.png',
			name:'AI写作'
		},{
			id:2,
			img:'https://luoxiaolin.vrprism.com/uploads/20240326/7e91a6856abaf42955c5c386875c4cde.png',
			imgActive:'https://luoxiaolin.vrprism.com/uploads/20240326/7b52125fc476af966bc9cf582a146ee2.png',
			name:'智能模板'
		},{
			id:3,
			img:'https://luoxiaolin.vrprism.com/uploads/20240326/40cd62f1efb9ea667535d742b8659788.png',
			imgActive:'https://luoxiaolin.vrprism.com/uploads/20240326/cbfedd1399ac2a47f35e998a690db495.png',
			name:'个人中心'
		}],
		HotItem:[],
		/* 是否登陆 有token */
		Is_Token:'',
		/* 多行文本框绑定的值 */
		Multiline_text:'',
		/* 会员中心跳转url */
		ai_user_url:'',
		/* 会员vip页跳转链接 */
		ai_vip_url:'',
		/* 会员登陆页跳转链接 */
		ai_login_url:'',
		/* 会员公众号授权页跳转链接 */
		ai_weixin_url:'',
		/* 个人信息数据 */
		user_info:{},
		/* vip详情数据 */
		vip_user:'开通会员',
		vip_show:false,
		/* 会话数据 */
		ConversationList:[],
		/* 会话列表数据 */
		ConverList:[],
		/* 会话Id */
		SessionId:-1,
		/* 加载 */
		loading:false,
		/* 新会话标识 */
		idenConver:0,
		/* 弹出层开关 */
		drawer: false,
		/* 页面尺寸 */
		windowWidth: window.innerWidth,  
		EquipmentIs:0,
		SendCss:'width:calc(100% - 250px)'
	}
  },
  mounted() {
	/* 监听回车事件 */
	// 获取 textarea 元素  
	var textarea = document.getElementById('myTextarea');  
	  
	// 监听 keydown 事件  
	let that = this;
	textarea.addEventListener('keydown', function(event) {  
	    // 检查是否是回车键（键码为 13）  
	    if (event.keyCode === 13) {  
	        event.preventDefault(); // 阻止默认的回车行为（如换行）  
	        // 在这里执行你想要的操作 
			
	        that.SendInterpretation()
	        // 例如，你可以在这里发送数据到服务器，或者执行其他逻辑  
	    }  
	});
	/* 监听页面尺寸变化 */
	this.$nextTick(() => {  
	  window.addEventListener('resize', this.handleResize);  
	}); 
	/* 初始化接口 */
	this.init()
	/* 请求问题示例数据 */
	this.ExampleList()
	// 获取document的cookie属性
	let cookies = document.cookie;
	// let cookies = 'PHPSESSID=rlf2cii5jat7m14r7kpuh60vbu; uid=8; token=34390701-1061-4a6e-a95c-b56183228866';//原先获取Cookie 打包后切换成这个  document.cookie
	let cookieArr = cookies.split('; '); // 将Cookie字符串按分号空格切割成数组
	for (let i = 0; i < cookieArr.length; i++) {
		const [key, value] = cookieArr[i].split('='); // 遍历每个Cookie项并按等号切割为键值对
		if(key == 'token'){
			this.Is_Token = value
		}
	}
	/* 请求用户接口 判断是否登录 */
	this.UserInfo()
	/* 请求会话列表 */
	this.ConveListFun()
	
	/* 判断是否是尺寸变化 */
	if(this.windowWidth > 820){
		this.EquipmentIs = 1
		this.SendCss = 'width:calc(100% - 250px)'
	}else{
		this.EquipmentIs = 0
		this.SendCss = 'width:100%'
	}
  },
  methods:{
	/* 页面尺寸变化 */
    handleResize() {  
		this.windowWidth = window.innerWidth;  
		/* 判断是否是尺寸变化 */
		if(this.windowWidth > 820){
			this.EquipmentIs = 1
			this.SendCss = 'width:calc(100% - 250px)'
		}else{
			this.EquipmentIs = 0
			this.SendCss = 'width:100%'
		}
	},
	detectDeviceType() {  
		const userAgent = navigator.userAgent || navigator.vendor || window.opera;  
		// 检查是否是移动设备  
		if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent)) {  
		    window.open(this.ai_login_url + '?url=' +  encodeURIComponent("https://ai.vrprism.com/h5/"), '_self'); // 在当前窗口或标签页中打开
		}else{
			window.open(this.ai_weixin_url + '?url=' +  encodeURIComponent("https://ai.vrprism.com/h5/"), '_self'); // 在当前窗口或标签页中打开
		}  
	  },
	/* 清除会话 */
	ClearAway(){
		this.$http('/index/ai.index/closeAllSeesionId').then(res=>{
			if(res.code == 1){
				this.ConverList = []
				this.ConversationList = []
				this.SessionId = ''
			}
		})
	},
	/* 提问实例 */
	uestion(item){
		this.Multiline_text = item
		this.SendInterpretation()
	},
	/* 新建会话 */
	NewConver(){
		this.$http('/index/ai.index/makeSessionId').then(res=>{
			if(res.code == 1){
				this.SessionId = res.data
				this.ConversationList = []
				this.idenConver = 1
			}
		})
	},
	/* 切换会话 */
	ToggleConve(id){
		this.SessionId = id
		/* 请求会话内容 */
		this.ConveContent(this.SessionId)
	},
	/* 获取会话列表 */
	ConveListFun(){
		this.$http('/index/ai.index/getUserAllSession').then(res=>{
			if(res.code == 1){
				this.ConverList = res.data
				this.SessionId = res.data[0]?.session_id
				/* 请求会话内容 */
				this.ConveContent(this.SessionId)
			}
		})
	},
	/* 获取会话内容 */
	ConveContent(id){
		let obj = {
			method:'post',
			body:{
				seesionId:id
			}
		}
		this.$http('/index/ai.index/getSessionInfo',obj).then(res=>{
			if(res.code == 1){
				this.ConversationList = res.data
				this.$nextTick(() => {
				  const scrollableDiv = this.$refs.scrollableDiv;
				  scrollableDiv.scrollTop = scrollableDiv.scrollHeight;  
				});  
			}
		})
	},
	/* 发送消息 */ 
	SendMessage(){
		if(this.Multiline_text){
			let message = {
				content:this.Multiline_text,
				role:'user'
			}
			this.ConversationList.push(message)
			
			this.$nextTick(() => {
			  const scrollableDiv = this.$refs.scrollableDiv;
			  scrollableDiv.scrollTop = scrollableDiv.scrollHeight;  
			});  
			
			
			let obj = {
				method:'post',
				body:{
					seesionId:this.SessionId,
					msg:this.Multiline_text
				}
			}
			this.Multiline_text = ''
			this.loading = true
			
			this.$http('/index/ai.index/baiduRequestMsg',obj).then(res=>{
				if(res.code == 1){
					
					let reply = {
						content:res.data.data[1].content,
						role:res.data.data[1].role
					}
					
					this.ConversationList.push(reply)
					this.loading = false
					
					this.$nextTick(() => {
					  const scrollableDiv = this.$refs.scrollableDiv;
					  scrollableDiv.scrollTop = scrollableDiv.scrollHeight;  
					}); 
					this.SessionId = res.data.session_id
					
					if(this.idenConver == 1){
						this.ConveListFun()
						this.idenConver = 0
					}
				}
				if(res.code == 0){
					let err = res?.data
					if(err && Object.keys(res.data)[0] == 'need_vip'){
						window.open(this.ai_vip_url, '_self'); // 在当前窗口或标签页中打开
					}
					this.loading = false
				}
			})
		}else{
			this.$message.error('请输入内容后再发送哦');
		}
	},
	/* 发送信息判断*/
	SendInterpretation(){
		if(this.Is_Token){
			this.SendMessage()
		}else{
			this.detectDeviceType()
		}
		
	},
	/* 查看用户信息 */  
	ViewUser(){
		if(this.Is_Token){
			window.open(this.ai_user_url, '_self'); // 在当前窗口或标签页中打开
		}else{
			this.detectDeviceType()
		}
	},
	/* 查看vip详情 */
	ViewVip(){
		if(this.Is_Token){
			window.open(this.ai_vip_url, '_self'); // 在当前窗口或标签页中打开
		}else{
			this.detectDeviceType()
		}
	},
	/* 时间戳装换方法 */
	timestampToDate(timestamp){
		const date = new Date(timestamp);  
		const year = date.getFullYear();  
		const month = ("0" + (date.getMonth() + 1)).slice(-2); // Months are zero based. Add leading 0 and slice the last 2 digits.  
		const day = ("0" + date.getDate()).slice(-2); // Add leading 0 and slice the last 2 digits.  
		const hours = ("0" + date.getHours()).slice(-2);  
		const minutes = ("0" + date.getMinutes()).slice(-2);  
		const seconds = ("0" + date.getSeconds()).slice(-2);     
		return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;  
	},
	/* 获取vip详情数据 */
	VipDetail(){
		this.$http('/index/ai.vip/index').then(res=>{
			if(res.code == 1){
				if(res.data.user_record == null){
					this.vip_user = '开通会员'
				}else{
					this.vip_user = res.data.user_record.expiretime
				}
				
				// this.vip_show = true
			}
		})
	},
	/* 获取个人信息接口 */
	 UserInfo(){
		this.$http('/index/ai.vip/userInfo').then(res=>{
			if(res.code == 1){
				this.user_info = res.data.userinfo
				this.VipDetail()
			}
		})
	},
	/* 获取问题示例数据 */
	ExampleList(){
		this.$http('/index/ai.index/getAiExample').then(res=>{
			if(res.code == 1){
				this.HotItem  = res.data
			}
		})
	},
	/* 数据初始化 */
	init(){
		this.$http('/index/ai.common/init').then(res=>{
			if(res.code == 1){
				this.ai_user_url = res.data.ai_user_url
				this.ai_vip_url = res.data.ai_vip_url
				this.ai_login_url = res.data.ai_login_url
				this.ai_weixin_url = res.data.ai_weixin_url
				/* 存储登录页 */
				localStorage.setItem('AI_LOGIN_URL', this.ai_login_url);
				localStorage.setItem('AI_WEIXIN_URL', this.ai_weixin_url); 
			}
		})
	},
	/* 切换显示板块 */
	Toggle(index,name){
		switch (name){
			case '智能模板':
			    this.$message({
				  message: '抱歉,该功能开发中,敬请期待',
				  type: 'warning'
				});
				break;
			case '个人中心':
			   if(this.Is_Token){
				   window.open(this.ai_user_url, '_self'); // 在当前窗口或标签页中打开
			   }else{
				   this.detectDeviceType()
			   }
			   
			    break;
			default:
				break;
		}
	}
  }
}
</script>

<style>
/* 移动端适配样式调整 */
@media screen and (max-width: 600px) {
	.Part_one .drawer{
		width: 16px !important;
		height: 16px !important;
		padding: 0 10px 0 10px !important;
	}
	.Part_one .drawer img{
		width: 16px !important;
		height: 16px !important;
	}
	.Left_side_area{
		width: 100px !important;
		min-width: 100px !important;
	}
	.Left_side_area .Left_title{
		padding: 12px 0 12px 0 !important;
		font-size: 12px !important;
	}
	.Left_side_area .New_Conversation{
		font-size: 10px !important;
		border-radius: 6px !important;
		padding: 6px 0 !important;
	}
	.Left_side_area .Conversation_Records{
		height: 55% !important;
	}
	.Left_side_area .Delect {
	    padding: 4px 0 !important;
	    border-radius: 4px !important;
	    margin-top: 15px !important;
	}
	.Left_side_area .Delect span {
	    font-size: 9px !important;
	}
	.Left_side_area .Delect img {
	    width: 8px !important;
	    height: 8px !important;
	}
	.Conversation_Records .Records{
		padding: 10px 10px !important;
		font-size: 8px !important;
	}
	.Conversation_Records .Records img{
		width: 14px !important;
		height: 9px !important;
	}
	.Feature .Plate{
		padding: 8px 0 8px 10px !important;
	}
	.Feature .Plate img{
		width: 20px !important;
		height: 20px !important;
		margin: 0px 6px 0 0 !important;
	}
	.Feature .Plate span{
		font-size: 12px !important;
	}
	.Right_side_area .Part_one{
		height: 36px !important;
	}
	.Part_one .Vip{
		margin: 0 10px !important;
	}
	.Part_one .Vip img{
		width: 12px !important;
		height: 10px !important;
		margin-right: 4px !important;
	}
	.Part_one .Vip span {
	    font-size: 8px !important;
	}
	.Part_one .User img {
	    width: 18px !important;
	    height: 18px !important;
	    margin: 0 5px 0 0 !important;
	}
	.Part_one .User span {
	    font-size: 8px !important;
	}
	.Part_two {
	    height: calc(100vh - 36px - env(safe-area-inset-bottom) - 70px) !important;
	}
	.Part_auto .placeholder {
	    height: 30px !important;
	}
	.Part_two .Part_auto {
	    margin: 0 !important;
	}
	.Part_auto .greeting .avatar {
	    width: 28px !important;
	    height: 28px !important;
	    margin-right: 6px !important;
	}
	.Part_auto .greeting .Message{
		padding: 6px !important;
		border-radius: 4px !important;
		font-size: 9px !important;
	}
	.Part_auto .greeting {
	    padding: 8px 12px !important;
	    margin-bottom: 15px !important;
	}
	.Part_Three .hottitle img {
	    width: 10px !important;
	    height: 15px !important;
	    margin-right: 7px !important; 
	}
	.Part_Three .hottitle span {
	    font-size: 14px !important;
	}
	.Part_Three .hotwords {
		grid-gap: 10px !important;
	    margin-top: 15px !important;
	    margin-bottom: 15px !important;
	}
	.Part_Three .hotwords .Item {
	    font-size: 8px !important;
	    height: 42px !important;
	    padding: 0 10px !important;
	}
	.Send_Message .Bottom_frame {
	    padding: 10px !important;
	}
	.Send_Message .Bottom_frame .input{
		padding: 10px 5px !important;
		font-size: 10px !important;
		min-height: 15px !important;
	}
	.Send_Message .Bottom_frame .Send {
	    font-size: 12px !important;
	    border-radius: 4px !important;
	    padding: 8px 24px !important;
	    margin-left: 18px !important;
	}
}	
	
.el-drawer{
	width: auto !important;
}	
.Send_Message .Bottom_frame .Send{
	font-size: 16px;
	color: #191a23;
	background: #76fbb9;
	border-radius: 8px;
	padding: 13px 33px;
	margin-left: 30px;
}	
.Send_Message .Bottom_frame .input{
	border: none;
	height: auto;
	padding: 15px 10px;
	font-size: 16px;
	background: #f2f4f6;
	color: #333;
	line-height: normal;
	white-space: pre-wrap;
	word-break: break-all;
	display: block;
	position: relative;
	width: 300px;
	max-height: 100px;
	min-height: 20px;
	overflow-y: scroll;
	flex: 1;
	border-radius: 5px;
}	
.Send_Message .Bottom_frame{
	display: flex;
	align-items: flex-end;
	position: relative;
	background: #fff;
	padding: 15px;
}	
.Send_Message{
	bottom: 0;
	width: calc(100% - 250px);
	position: fixed;
	box-sizing: border-box;
}	
.Part_Three .hotwords .Item span{
	overflow: hidden;
	-webkit-line-clamp: 2;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}
.Part_Three .hotwords .Item{
	background: #fff;
	color: #333;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	height: 70px;
	padding: 0 15px;
}	
.Part_Three .hotwords{
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
	margin-top: 32px;
	margin-bottom: 32px;
	display: grid;
}	
.Part_Three .hottitle span{
	font-size: 24px;
	color: #333;
}	
.Part_Three .hottitle img{
	width: 13px;
	height: 18px;
	margin-right: 10px;
}	
.Part_Three .hottitle{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 15px;
}	
.Part_Three{
	width: 72%;
	margin: auto;
	position: relative;
}
.Part_auto .greeting .Message{
	position: relative;
	padding: 10px;
	border-radius: 5px;
	background: #fff;
	color: #333;
	font-size: 14px;
	width: 80%;
	white-space: break-spaces;
}
.Part_auto .greeting .avatar{
	border-radius: 50%;
	width: 40px;
	height: 40px;
	margin-right: 10px;
	border: 1px solid #fff;
	flex-shrink: 0;
}
.Part_auto .greeting{
	padding: 10px 15px;
	display: flex;
	margin-bottom: 20px;
}
.Part_auto .placeholder{
	width: 100%;
	height: 70px;
}
.Part_two .Part_auto::-webkit-scrollbar{
	display: none;
}
.Part_two .Part_auto{
	overflow: auto;
	height: 100%;
	margin: 0 55px;
}	
.Part_two{
	width: 100%;
	height: calc(100vh - 50px - env(safe-area-inset-bottom) - 90px);
}
.Part_one .drawer img{
	width: 24px;
	height: 24px;
}
.Part_one .drawer{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0 15px 0 30px;
} 
.Part_one .User span{
	color: #63646F;
	font-size: 14px;
}	
.Part_one .User img{
	border-radius: 50%;
	width: 32px;
	height: 32px;
	margin: 0 10px 0 0;
}	
.Part_one .User{
	display: flex;
	align-items: center;
}	
.Part_one .Vip span{
	font-size: 14px;
	color: #CF770F;
}
.Part_one .Vip img{
	width: 16px;
	height: 14px;
	margin-right: 5px;
}	
.Part_one .Vip{
	margin: 0 24px;
	display: flex;
	align-items: center;
}	
.Right_side_area .Part_one{
	display: flex;
	align-items: center;
	width: 100%;
	background: #FFFFFF;
	height: 56px;
}	
.Feature .Plate span{
	color: #FFFFFF;
	font-size: 16px;
}	
.Feature .Plate img{
	width: 25px;
	height: 25px;
	margin: 0 10px 0 0;
}	
.Feature .Plate{
	padding: 8px 0 8px 16px;
	display: flex;
	align-items: center;
}	
.Feature{
	padding: 20px 0 0 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.Conversation_Records .Records span{
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	margin: 0 5px;
	text-align: center;
	width: 100%;
	font-size: 13px;
	color: #FFFFFF;
}
.Conversation_Records .Records img{
	width: 18px;
	height: 13px;
}
.Conversation_Records .Records{
	display: flex;
	align-items: center;
	padding: 15px 10px;
	font-size: 13px;
	margin-bottom: 10px;
}
.Conversation_Records::-webkit-scrollbar{
	display: none;
}
.Left_side_area .Conversation_Records{
	width: 100%;
	height: 55%;
	overflow: auto;
}
.Left_side_area .New_Conversation{
	border: 1px dashed #76fbb9;
	color: #76fbb9;
	padding: 8px 0;
	margin: 0 10px;
	margin-bottom: 10px;
	font-size: 14px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.Left_side_area .Delect span{
	font-size: 14px;
	color: #FFFFFF;
}
.Left_side_area .Delect img{
	width: 14px;
	height: 14px;
	margin-right: 5px;
}
.Left_side_area .Delect{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 0;
	border: 1px solid #fff;
	border-radius: 8px;
	margin: 0 10px;
	margin-top: 20px;
}
.Left_side_area .Left_title{
	text-align: center;
	color: #abdfca;
	padding: 12px 0 32px 0;
	font-size: 24px;
}
.Right_side_area{
	width: 100%;
	height: 100vh;
}	
.Left_side_area{
	width: 250px;
	background: #000000;
	min-width: 250px;
	height: 100vh;
}
.page{
	display: flex;
	width: 100%;
	overflow: auto;
	height: 100vh;
	background: linear-gradient(137deg, #ECF2F5 0%, rgba(236,242,245,0.64) 100%);
}	
</style>
